@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

header{
        line-height: vw(65);
    box-sizing: border-box;
    padding: 0 vw(28);
    .header-left{
        float: left;
        a{
            color: #000000;
            .iconfont{
                color: #000000;
                font-size: vw(30);
            }
        }
    }
    .header-right{
        float: right;
        .iconfont{
            font-size: vw(30);
            color: #a6a6a6;
            padding: 0 vw(10);
        }
    }
    .header-middle{
        font-size: vw(30);
        display: inline;
        overflow: hidden;
        margin-left:35% ;
        text-align: center;
        p{
            
        }
    }
}

section{
    top: vw(65);
    bottom: vw(47);
    .Fion-presentation{
        width: 100%;
        height: vw(425);
        background: url(../../img/zone/background.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .header-img{
            width: vw(180);
            height: vw(180);
            margin: 0 auto;
            padding-top: vw(45);
            padding-bottom: vw(12);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .presentation{
            p{
                font-size: vw(20);
                color: #fff;
                text-align: center;
                span{
                    color: #ff0000;
                }
            }
            ul{
                width: vw(180);
                margin: 0 auto;
                padding: vw(12) 0;
                li{
                    width: vw(48);
                    height: vw(24);
                    line-height: vw(24);
                    border: vw(1) solid #cbd1db;
                    border-radius: vw(3);
                    float: left;
                }
                li:first-child{
                    float: left;
                }
                li:nth-child(2){
                    margin: 0 vw(10);
                }
                li:last-child{
                    float: right;
                }
            }
        }
        .concern{
            width: 100%;
            height: vw(50);
            position: absolute;
            bottom: 0;
            background: rgba(0,0,0,.3);
            .concern-concern{
                width: vw(319);
                margin-top: vw(8);
                margin-bottom:vw(8) ;
                border-right: vw(1) solid #fff;
                float: left;
                text-align: center;
                p{
                    font-size: vw(20);
                    line-height: vw(34);
                    a{
                        color: #fff;
                    }
                }
            }
            .concern-cooperate{
                width: vw(319);
                margin-top: vw(8);
                margin-bottom:vw(8) ;
                float: right;
                text-align: center;
                p{
                    font-size: vw(20);
                    line-height: vw(34);
                    a{
                        color: #fff;
                    }
                }
            }
        }
    }
    .Fion-fans{
        width: 100%;
        padding: vw(16) 0;
        border-bottom: vw(1) solid #e5e5e5;
        .fans-left{
            float: left;
            .fans{
                float: left;
                img{
                    margin-right: vw(10);
                }
                span{
                    vertical-align: top;
                    font-size:vw(18) ;
                    color: #585858;
                }
            }
            .fans:first-child{
                padding-top: vw(15);
                padding-left:  vw(28);
                padding-right:  vw(38);
                img{
                    width: vw(28);
                    height: vw(20);
                }
            }
            .fans:nth-child(2){
                padding-top: vw(14);
                padding-right: vw(39);
                img{
                    width: vw(25);
                    height: vw(26);
                }
                span{
                    
                }
            }
            .fans:last-child{
                padding-top:vw(14) ;
                img{
                    width: vw(34);
                    height: vw(22);
                }
            }
        }
        .fans-right{
            float: right;
            table{
                width: vw(309);
                td{
                    width: vw(101);
                    text-align: center;
                    border-right: vw(3) solid #cccccc;
                    p{
                        font-size: vw(22);
                        color: #6c6c6c;
                    }
                    p:hover{
                        color: #EB7350;
                    }
                    span{
                        font-size: vw(18);
                        color: #b6b6b6;
                    }
                }
                td:last-child{
                    border-right: 0;
                }
            }
        }
    }
    .Fion-tag{
        width: 100%;
        height: vw(77);
        border-bottom: vw(1) solid #e5e5e5;
        box-sizing: border-box;
        padding: 0 vw(25);
        .tag-all{
            margin-top: vw(21);
            .tag{
                float: left;
                width: vw(27);
                height: vw(27);
                padding: vw(6);
                
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            ul{
                float: left;
                li{
                    font-size: vw(20);
                    float: left;
                    color: #585858;
                    padding: vw(5);
                    border: vw(1) solid #DDDDDD;
                    border-radius: vw(4);
                    margin-left:vw(15) ;
                }
            }
            .tag-right{
                float: right;
                a{
                    font-size: vw(20);
                    line-height: vw(35);
                    color: #302e2e;
                }
            }
        }
    }
    .Fion-change{
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .tabs {
            float: none;
            list-style: none;
            position: relative;
            text-align: left;
            li {
                width: 25%;
                float: left;
                display: block;
            }
            input[type="radio"] {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            label {
                height: vw(55);
                text-align: center;
                display: block;
                padding: vw(14) vw(21);
                border-radius: vw(2) vw(2) 0 0;
                font-size: vw(20);
                font-weight: normal;
                text-transform: uppercase;
                cursor: pointer;
                position: relative;
                top: vw(4);
                -webkit-transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
                .img1{
                    width: vw(40);
                    height: vw(30);
                    margin: 0 auto;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    padding-top: vw(10);
                    font-size: vw(16.64);
                }
            }
            .tab-content {
                width: 100%;
                
                display: none;
                overflow: hidden;
                font-size: vw(17);
                line-height: vw(25);
                position: absolute;
                top: 100%;
                left: 0;
            }
        }
    }
}

.tabs [id^="tab"]:checked+label {
    top: 0;
    padding-top: vw(17);
    border-bottom:vw(2) solid #000 ;
}
.tabs [id^="tab"]:checked+label>.img1{
    transform: scale(1.2);
}
.tabs [id^="tab"]:checked~[id^="tab-content"] {
    display: block;
}

.Fion-material{
    color: #5e5e5e;
    .other-material{
        .material-title{
            width: 100%;
            height: vw(40);
            background: #f2f2f2;
            box-sizing: border-box;
            padding-left: vw(28);
            padding-right: vw(28);
            .title-left{
                float: left;
                p{
                    font-size: vw(26);
                    line-height: vw(40);
                    color: #535353;
                }
            }
            .title-right{
                float: right;
                a{
                    i{
                        display: inline-block;
                        font-size: vw(26);
                        line-height: vw(40);
                        color: #9d9d9d;
                    }
                }
            }
        }
        .material-centent{
            padding-left: vw(28);
            padding-top: vw(15);
            p{
                font-size: vw(20);
                line-height: vw(49);
            }
            p:last-child{
                padding-bottom: vw(15);
            }
        }
        .material-file{
            padding-bottom:vw(200) ;
            .centent-file{
                width: vw(97);
                height: vw(97);
                background: #e5e5e5;
                border-radius: vw(5);
                margin-left: vw(29);
                margin-top: vw(22);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.Fion-developments{
    
}

.Fion-show{
    
}

.Fion-life{
    width: 100%;
    .life-release{
        .release-title{
            width: 100%;
            height: vw(40);
            background: #f2f2f2;
            p{
                font-size: vw(20);
                line-height: vw(40);
                padding-left: vw(28);
            }
        }
        .release-message{
            width: vw(580);
            margin: 0 auto;
            .release-img{
                width: vw(50);
                height: vw(50);
                padding: vw(18) 0;
                padding-right: vw(25);
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .release-time{
                float: right;
                padding-top: vw(18);
                span{
                    font-size: vw(20);
                }
            }
            .release-centent{
                padding: vw(18) 0;
                h6{
                    font-size: vw(20);
                    line-height: vw(26);
                }
                p{
                    font-size: vw(16);
                    line-height: vw(24);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

